<template>
	<div class="courseinfo">
		<div class="nav">
			<p><span>科目：</span>{{ coursename }}&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>老师：</span>{{ userlogin.name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>时间：</span>{{ timeon }}<span>-</span>{{ timeoff }}</p>

		</div>
		<h3>本堂课使用情况总览</h3>
		<p>课堂统计</p>
		<div class="countBox">
			<div class="sbox draw">
				<div class="left"></div>
				<div class="right">
					<p id="draw">{{ countInfo.draw }}</p>
					<p>画笔截图次数</p>
				</div>
			</div>
			<div class="sbox courseXiti">
				<div class="left"></div>
				<div class="right">
					<p id="lessonXiti">{{ countInfo.lessonXiti }}</p>
					<p>课件出题次数</p>
				</div>
			</div>
			<div class="sbox favoriteXiti">
				<div class="left"></div>
				<div class="right">
					<p id="favoriteXiti">{{ countInfo.favoriteXiti }}</p>
					<p>单题出题次数</p>
				</div>
			</div>
			<div class="sbox MoreQuestions">
				<div class="left"></div>
				<div class="right">
					<p id="MoreQuestions">{{ countInfo.MoreQuestions }}</p>
					<p>套卷出题次数</p>
				</div>
			</div>
		</div>
		<p>课堂回顾</p>
		<div class="lookBack">
			<div class="nav">
				<div @mouseenter="openItems">{{ currentItem }}</div>
				<el-collapse-transition>
					<ul v-show="showAllItems" @mouseenter="openItems" @mouseleave="closeItems" class="allItems">
						<li @click="getDrawViewStatistics">画笔</li>
						<li @click="getXitiStatistics">课件出题</li>
						<li @click="getResourceXitiStatistics">全体作答</li>
						<li @click="getCompetiveStatistics">抢答题</li>
						<li @click="getCallnameStatistics">随机答题</li>
						<li @click="getGroupRaceStatistics">小组作答</li>
						<!--
						<li @mouseenter="getMoreQuestionsStatistics" @mouseleave="outTaojuan">
							套卷统计
							<div class="testBox" v-show="showTaojuan">
								<div v-if="noTaojuan">暂无套卷使用记录</div>
								<div v-for="x in taojuanData" @click="chooseTaojuan(x,$event)">{{ x.name }}</div>
							</div>
						</li>
						-->
					</ul>
				</el-collapse-transition>
				<p class="taojuanInfo" v-if="currentData=='taojuanData'">
					<span>{{ taojuanName }}</span>
					<span>题目数：{{ taojuanNums }}</span>
					<span>答题时间：{{ taojuanTime }}</span>
					<span>平均正确率：{{ taojuanCorrect }}</span>
				</p>
			</div>
			<table>
				<tr v-if="currentData=='drawData'">
					<th>图片</th>
					<th>名称</th>
					<th>时间</th>
				</tr>
				<tr v-if="'allResourceData,xitiData,taojuanData'.indexOf(currentData)>-1">
					<th>题号</th>
					<th>题型</th>
					<th>答案</th>
					<th>参与率</th>
					<th>正确率</th>
				</tr>
				<tr v-if="'competiveData,callnameData,groupRaceData'.indexOf(currentData)>-1">
					<th>题号</th>
					<th>题型</th>
					<th>答案</th>
					<th>答题学生</th>
					<th v-if="currentData==groupRaceData">参与小组</th>
				</tr>
				<tr v-for="(x,index) in drawData" v-if="currentData=='drawData'">
					<td @click="showPic(index)">
						<img :src="'http://api.skyeducation.cn/EduApi/upload/'+x.createtime.substring(0,4)+'/'+x.createtime.substring(4,6)+'/'+x.createtime.substring(6,8)+'/'+x.filename" alt="" />
					</td>
					<td>{{ x.filename }}</td>
					<td>{{ x.uptime }}</td>
				</tr>
				<tr v-for="(x,index) in allResourceData" v-if="currentData=='allResourceData'">
					<td>第{{ index+1 }}题</td>
					<td>{{ x.type }}</td>
					<td>{{ transAnswer(x.answer) }}</td>
					<td>{{ x.participation }}</td>
					<td>{{ x.correct }}</td>
				</tr>
				<tr v-for="(x,index) in xitiData" v-if="currentData=='xitiData'">
					<td>第{{ index+1 }}题</td>
					<td>{{ x.type }}</td>
					<td>{{ transAnswer(x.answer) }}</td>
					<td>{{ x.participation }}</td>
					<td>{{ x.correct }}</td>
				</tr>
				<tr v-for="(x,index) in competiveData" v-if="currentData=='competiveData'">
					<td>第{{ index+1 }}题</td>
					<td>{{ x.type }}</td>
					<td>{{ transAnswer(x.answer) }}</td>
					<td>{{ x.student }}</td>
				</tr>
				<tr v-for="(x,index) in callnameData" v-if="currentData=='callnameData'">
					<td>第{{ index+1 }}题</td>
					<td>{{ x.type }}</td>
					<td>{{ transAnswer(x.answer) }}</td>
					<td>{{ x.student }}</td>
				</tr>
				<tr v-for="(x,index) in groupRaceData" v-if="currentData=='groupRaceData'">
					<td>第{{ index+1 }}题</td>
					<td>{{ x.type }}</td>
					<td>{{ transAnswer(x.answer) }}</td>
					<td>
						<p v-for="(item,$index) in x.students">
							第{{ $index+1 }}组 {{ item }}
						</p>
					</td>
				</tr>
				<tr v-for="(x,index) in taojuanDetail" v-if="currentData=='taojuanData'">
					<td>第{{ index+1 }}题</td>
					<td>{{ x.type }}</td>
					<td>{{ transAnswer(x.answer) }}</td>
					<td>{{ x.takePart_ratio }}</td>
					<td>{{ x.correct_ratio }}</td>
				</tr>
			</table>
			<div class="noData" v-show="noData">暂无数据</div>
		</div>
		<transition name="el-fade-in-linear">
		<div class="picBox" v-show="showpicBox">	
			<span class="close" @click="closePic">X</span>
		  <el-carousel indicator-position="outside" ref="pic" trigger="click" height="450px" :autoplay="autoplay">
    		<el-carousel-item v-for="x in drawData" >
     <img :src="IMG_ROOT+x.createtime.substring(0,4)+'/'+x.createtime.substring(4,6)+'/'+x.createtime.substring(6,8)+'/'+x.filename" alt="" />
    </el-carousel-item>
  </el-carousel>
		</div>
		</transition>
	</div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { IMG_ROOT } from '../util/config'
	import api from '../api'
	export default {
		created() {
			this.IMG_ROOT=IMG_ROOT;
			console.log(IMG_ROOT)
			this.INIT_STATE();
			
			console.log(this.$route.params)
			this.lessonid = this.$route.params.lessonid
			this.coursename = this.$route.params.coursename
			this.timeon = this.$route.params.timeon
			this.timeoff = this.$route.params.timeoff
			var that = this
			//获取总览信息展示
			api.getLessonReviewStatistics({
				lessonid: this.lessonid
			}).then(response => {
				that.countInfo = response.data.data
			})
			this.getDrawViewStatistics()

		},
		data() {
			return {
				IMG_ROOT:'',
				showpicBox:false,
				autoplay:false,
				currentItem:'选择分类',
				lessonid: '',
				coursename: '',
				timeon: '',
				timeoff: '',
				countInfo: {},
				taojuanName: '',
				taojuanNums: '',
				taojuanTime: '',
				taojuanCorrect: '',
				showAllItems: false,
				showTaojuan: false,
				currentData: '',
				drawData: [],
				allResourceData: [],
				competiveData: [],
				callnameData: [],
				groupRaceData: [],
				xitiData: [],
				taojuanData: [],
				taojuanDetail: [],
				noData:false,
				noTaojuan:false
			}
		},
		computed: {
			...mapState(['userlogin'])
		},
		methods: {
			...mapMutations(['INIT_STATE']),
			showPic(index){
				this.$nextTick(function(){
				console.log(this.$refs)
				this.$refs.pic.setActiveItem(index)
				this.showpicBox=true;
					
				})
			},
			closePic(){
				this.showpicBox=false;
			},
			chooseDate(x) {
				console.log(seriDate(x[0]))
				this.getLessonReviews(seriDate(x[0]), seriDate(x[1]))
			},
			chooseTaojuan(x, event) {
				event.stopPropagation();
				this.noData=false;
				this.currentData = 'taojuanData';
				this.currentItem='套卷答题';
				this.taojuanDetail = x.resultList;
				this.taojuanName = x.name;
				this.taojuanNums = x.nums;
				this.taojuanTime = x.limit;
				this.taojuanCorrect = x.ave_correct_ratio;
			},
			outTaojuan(){
				this.showTaojuan = false;
			},
			openItems() {
				this.showAllItems = true
			},
			closeItems() {
				this.showAllItems = false

				this.showTaojuan = false;
			},
			//批注
			getDrawViewStatistics() {
				this.noData=false
				var that = this
				this.currentItem='画笔';
				this.closeItems();
				console.log(this.drawData)
				if(this.drawData.length>0) {
					this.currentData = 'drawData';
				} else {
					api.getDrawViewStatistics({
						lessonid: this.lessonid
					}).then(response => {
						that.drawData = response.data.data;
						that.currentData = 'drawData';
						if(response.data.data.length==0){
							that.noData=true;
						}
					})
				}

			},
			//课件出题
			getXitiStatistics() {
				this.noData=false
				var that = this
				this.currentItem='课件出题';
					this.closeItems();
				if(this.xitiData.length>0) {
					this.currentData = 'xitiData';
				} else {
					api.getXitiStatistics({
						lessonid: this.lessonid
					}).then(response => {
						that.xitiData = response.data.data
						that.currentData = 'xitiData';
						if(response.data.data.length==0){
							that.noData=true;
						}
					})
				}

			},
			//全体作答
			getResourceXitiStatistics() {
				this.noData=false
				var that = this
				this.currentItem='全体作答';
					this.closeItems();
				if(this.allResourceData.length>0) {
					this.currentData = 'allResourceData';
				} else {
					api.getResourceXitiStatistics({
						lessonid: this.lessonid
					}).then(response => {
						that.allResourceData = response.data.data
						that.currentData = 'allResourceData';
						if(response.data.data.length==0){
							that.noData=true;
						}
					})
				}
			},
			//抢答
			getCompetiveStatistics() {
				this.noData=false
				var that = this
				this.currentItem='抢答题';
					this.closeItems();
				if(this.competiveData.length>0) {
					this.currentData = 'competiveData';
				} else {
					api.getCompetiveStatistics({
						lessonid: this.lessonid
					}).then(response => {
						that.competiveData = response.data.data
						that.currentData = 'competiveData';
						if(response.data.data.length==0){
							that.noData=true;
						}
					})
				}

			},
			//点名 随机点名
			getCallnameStatistics() {
				this.noData=false
				var that = this
				this.currentItem='随机点名';
					this.closeItems();
				if(this.callnameData.length>0) {
					this.currentData = 'callnameData';
				} else {
					api.getCallnameStatistics({
						lessonid: this.lessonid
					}).then(response => {
						that.callnameData = response.data.data
						that.currentData = 'callnameData';
						if(response.data.data.length==0){
							that.noData=true;
						}
					})
				}
			},
			//小组作答
			getGroupRaceStatistics() {
				this.noData=false
				var that = this
				this.currentItem='小组作答';
					this.closeItems();
				if(this.groupRaceData.length>0){
					this.currentData = 'groupRaceData';					
				}else{
					api.getGroupRaceStatistics({
					lessonid: this.lessonid
				}).then(response => {
					that.groupRaceData = response.data.data
					that.currentData = 'groupRaceData';
					if(response.data.data.length==0){
							that.noData=true;
						}
				})
				}				
			},
			//套卷答题统计
			getMoreQuestionsStatistics() {
				var that = this
				if(this.taojuanData.length>0) {
						that.showTaojuan = true;
				} else if(this.noTaojuan){					
					this.showTaojuan = true;
					return
				}else{
					api.getMoreQuestionsStatistics({
						lessonid: this.lessonid
					}).then(response => {
						that.taojuanData = response.data.data
						that.showTaojuan = true;
						if(that.taojuanData.length==0){
							that.noTaojuan=true;
						}
					})
				}
			},
			transAnswer(ans){
				switch (ans){
					case 'W':
						return 'X';
					case 'R':
						return '√';
					default:
						return ans;
				}
			}

		}
	}
</script>

<style scoped>
	.noData{
		background: url(../assets/images/nodata.png) no-repeat center;
		height: 329px;
		width: 100%;
		background-color: #f9f9f9;
		line-height: 535px;
		letter-spacing: 2px;
		color: #9b9b9b;
		text-align: center;
	}
	.picBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);
	}
	.picBox>.close{
		position: absolute;
		right: 10px;
		top: 10px;
		width: 36px;
		height: 36px;
		background-color: rgba(0,0,0,0.4);
		color: rgba(255,255,255,0.4);
		border-radius: 36px;
		text-align: center;
		line-height: 36px;
		font-size: 16px;		
		background-color: rgba(0,0,0,0.8);
		color: white;
		cursor: pointer;
		transition: all 0.5s;
	}
	.picBox>.close:hover{		
	}
	.el-carousel{
		width: 720px;
		margin: 120px auto;
	}
	.el-carousel__item img{
		width: 600px;
		height: 100%;
		margin: 0 auto;
		margin-left: 60px;
	}
	.courseinfo {
		cursor: default;
		padding-bottom: 40px;
		min-height: 580px;
	}
	
	.courseinfo>p {
		padding-left: 30px;
		font-size: 14px;
		margin-top: 16px;
		margin-bottom: 18px;
	}
	
	.courseinfo>.nav {
		background: #F5FAFC;
		height: 48px;
		line-height: 48px;
		padding-left: 30px;
	}
	
	.courseinfo>.nav span {
		font-size: 16px;
		font-weight: 800;
	}
	
	.courseinfo h3 {
		font-size: 14px;
		color: #4A4A4A;
		font-weight: bold;
		padding-top: 0;
		margin-top: 24px;
		padding-left: 30px;
	}
	
	.courseinfo .countBox {
		margin-top: 10px;
		/*margin-left: 20px;*/
	}
	
	.courseinfo .countBox .title {
		font-size: 14px;
		color: #4A4A4A;
	}
	
	.courseinfo .countBox {
		display: flex;
		justify-content: space-around;
		height: 90px;
		margin-top: 10px;
	}
	
	.courseinfo .countBox>div {
		width: 200px;
		height: 80px;
		/*margin-right: 18px;*/
		background: #FFFFFF;
		border-radius: 8px;
	}
	
	.courseinfo .countBox>div>.left {
		float: left;
		width: 91.7px;
		height: 80px;
		background-size: 45px;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 8px 0 0 8px;
	}
	
	.courseinfo .countBox>div>.right {
		float: right;
		width: 106px;
		height: 80px;
	}
	
	.courseinfo .countBox>div>.right>p {
		font-size: 14px;
		color: #4A4A4A;
		text-align: center;
		margin: 0;
	}
	
	.courseinfo .countBox>div>.right>p:nth-of-type(1) {
		font-size: 16px;
		line-height: 48px;
		font-weight: 900;
	}
	
	.courseinfo .countBox>div>.right>p:nth-of-type(2) {
		line-height: 15px;
	}
	
	.courseinfo .countBox>.draw {
		border: 1px solid #325EDB;
	}
	
	.courseinfo .countBox>.draw>.left {
		background-color: #325EDB;
		background-image: url(../assets/images/draw.png);
	}
	
	.courseinfo .countBox>.courseXiti {
		border: 1px solid #7D37FD;
	}
	
	.courseinfo .countBox>.courseXiti>.left {
		background-color: #7D37FD;
		background-image: url(../assets/images/courseXiti.png);
	}
	
	.courseinfo .countBox>.favoriteXiti {
		border: 1px solid #23CCF5;
	}
	
	.courseinfo .countBox>.favoriteXiti>.left {
		background-color: #23CCF5;
		background-image: url(../assets/images/favoriteXiti.png);
	}
	
	.courseinfo .countBox>.MoreQuestions {
		border: 1px solid #CF64E6;
	}
	
	.courseinfo .countBox>.MoreQuestions>.left {
		background-color: #CF64E6;
		background-image: url(../assets/images/MoreQuestions.png);
	}
	
	.lookBack {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.lookBack>.nav {
		width: 100%;
		height: 48px;
		background-color: #14ACF4;
		position: relative;
	}
	
	.lookBack>.nav>.taojuanInfo {
		position: absolute;
		left: 120px;
		top: 14px;
		color: white;
	}
	
	.lookBack>.nav>.taojuanInfo>span {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px;
	}
	
	.lookBack>.nav>.taojuanInfo>span:nth-of-type(1) {
		display: inline-block;
		width: 400px;
		text-align: center;
	}
	
	.lookBack>.nav>div {
		cursor: pointer;
		width: 100px;
		height: 30px;
		line-height: 30px;
		color: #14ACF4;
		position: relative;
		cursor: pointer;
		background: white;
		margin-right: 10px;
		border-radius: 8px;
		display: inline-block;
		text-align: center;
		margin-top: 9px;
		margin-left: 16px;
	}
	
	ul {
		position: relative;
		top: -30px;
		left: 16px;
		width: 100px;
		z-index: 2;
		background-color: #fff;
		border: 1px solid #e6ebf5;
		border-radius: 4px;
		-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
	}
	
	li {
		list-style: none;
		text-align: center;
		cursor: default;
		line-height: 36px;
		padding: 0 20px;
		margin: 0;
		font-size: 14px;
		color: #5a5e66;
		outline: 0;
		position: relative;
	}
	
	li:hover {
		background-color: #ecf5ff;
		color: #66b1ff
	}
	
	li>.testBox {
		position: absolute;
		left: 100px;
		top: 0px;
		background-color: #fff;
		border: 1px solid #e6ebf5;
		border-radius: 4px;
		-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
	}
	
	li>.testBox>div {
		width: 180px;
		overflow: hidden;
		text-align: center;
		cursor: default;
		line-height: 36px;
		padding: 0 20px;
		margin: 0;
		font-size: 14px;
		color: #5a5e66;
		outline: 0;
	}
	
	li>.testBox>div:hover {
		background-color: #ecf5ff;
		color: #66b1ff
	}
	
	.allItems {
		transition: all 0.5s;
	}
	
	table {
		width: 100%;
		empty-cells: show;
		background-color: transparent;
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	tr {}
	
	th {
		line-height: 35px;
	}
	
	th,
	td {
		border: solid 1px #ccc;
		width: 100px;
		cursor: default;
		height: 35px;
		padding: 0;
		text-align: center;
		position: relative;
		font-size: 14px;
	}
	
	td {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	
	td>p {
		margin-bottom: 8px;
		text-align: left;
		text-indent: 64px;
	}
	
	td>p:nth-last-of-type(1) {
		margin-bottom: 0;
	}
	
	img {
		width: 100px;
		height: 70px;
	}
</style>